<template>
  <div class="confirmsc">
    <div class="toper">
      <div class="head">
        <div class="title">简报制作</div>
        <div class="desc">半自动化生成或舆情分析报告<i></i></div>
      </div>
      <div class="liuchen">
        <div class="left">
          <step :data='4'></step>
        </div>
        <div class="right">
          <div class="edit">
            <div class="choose">返回素材库</div>
          </div>
        </div>
      </div>
    </div>
    <div class="space"></div>
    <div class="loading" v-show="0==1">
      <div class="progress-bar">
        <div class="sr-only"></div>
      </div>
      <div class="name">简报生成中</div>
    </div>
    <div class="success">
      <div class="img"></div>
      <div class="name">生成成功</div>
    </div>
  </div>
</template>
<script>
import step from './step'
import TendLabel from 'components/common/TendLabel'
export default {
  name:'briefsuccess',
  components: {step,TendLabel}
}
</script>
<style lang="stylus" scoped>
  .toper
    height 250px
    padding 30px
    box-sizing border-box
    >.head
      height 40px
      font-size 0
      border-bottom 1px solid #dcdcdc 
      box-sizing border-box
      .title
        display inline-block
        font-size 1.3rem
        color #555
        font-weight bold
      .desc
        display inline-block
        margin-left 8px
        font-size 0.88rem
        color #999
        i
          display inline-block
          margin-left 8px
          width 14px
          height 14px
          background-image url('img/brief-why.png')
          background-size cover
          background-repeat no-repeat
    .liuchen
      margin-top 38px
      font-size 0
      display flex
      .left
        flex 1
      .right
        width 250px
        font-size 0
        .edit
          float right
          >div
            width 120px
            height 34px
            color #fff
            background-position 10% 55%
            font-size 12px
            line-height 34px
            text-indent 40px
            background-repeat no-repeat
            &.generate
              background-color #e85a47
              background-image url(img/generate.png)
              border-radius 8px
            &.choose
              background-color #e85a47
              background-image url(img/choose.png)
              border-radius 8px
              margin-top 23px
              
          .desc
            font-size 12px
            color #999
            text-indent 0
            >i
              display inline-block
              color #e85a47
              line-height 34px
  .space
    height 10px
    background #f0f5fb
  .loading
    .progress-bar
      width 25vw
      height 14px
      margin 0 auto
      margin-top 200px
      background-color #f5f5f5
      box-shadow inset 0 1px 2px rgba(0,0,0,.1)
      border-radius 4px
      overflow hidden
      .sr-only
        width 50px
        height 100%
        background #142775
        background-image: linear-gradient(-45deg, 
          transparent 25%,
          rgba(255,255,255,.3) 0,
          rgba(255,255,255,.3) 50%,
          transparent 0,
          transparent 75%,
          rgba(255,255,255,.3) 0);
        background-size 60px 60px
        animation barloop .8s infinite linear
    .name
      font-size 26px
      color #333
      text-align center
      margin-top 24px
.success
  text-align center
  .img
    margin 0 auto
    margin-top 130px
    width 146px
    height 146px
    background url(img/brief-success.png) no-repeat
    background-size 100%
  .name
      font-size 26px
      color #333
      text-align center
      margin-top 24px
@keyframes barloop
  to 
    background-position-x -60px
  

      
  
</style>


